<template>
  <div class="consultation">
    <h3 style="text-align: center;position: relative;">{{ isDetail ? '文章详情' : '文章列表' }}
      <i @click="isDetail = false;doBack()" class="el-icon-arrow-left" v-if="isDetail"></i>
    </h3>
    <div class="articles" v-if="!isDetail">
      <div @click="toDetail(item)" title="点击查看文章详情" class="each-article" v-for="(item, index) in tableData" :key="index">
        <div class="art-title"><span style="font-size: 14px;">文章标题：</span>{{item.title}}</div>
        <div class="flex-center">
          <div>作者：{{item.creator}}</div>
          <div>发布时间：{{item.createTime}}</div>
        </div>
      </div>
    </div>

    <div v-if="isDetail" class="detail">
      <div class="title">{{ article.title }}</div>
      <div class="subtitle">
        <div style="color: #999;">{{ article.createTime }}</div>  
      </div>
      <div class="btns">
        <el-select size="mini" style="width: 100px;" v-model="rate" placeholder="请选择速度">
          <el-option
            v-for="item in speed"
            :key="item.key"
            :label="item.value"
            :value="item.key">
          </el-option>
        </el-select>
        <img title="播放" v-if="isPause" @click="broad()" src="../../assets/img/播放.svg" alt="">
        <img title="暂停" v-if="!isPause" @click="pause()" src="../../assets/img/暂停.svg" alt="">
        <img title="重新播放" @click="rebroad()" src="../../assets/img/重新播放.svg" alt="">
      </div>
      <div class="content">
        <!-- <Editor
          style="height: 80vh; overflow: hidden;overflow-y: scroll;"
          v-model="html"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"
        /> -->
        <div ref="content" class="content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getExpense } from "../../service.js";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  name: "Login",
  components: { Editor, Toolbar },
  mounted() {
    // 检测是否支持html5
    if ((typeof document.createElement('canvas').getContext === "function") === false) {
      this.$message.error('当前浏览器不支持html5')
      return
    }
    // 是否是ie浏览器
    if (+[1,] != 1) {
      this.$message.error('此功能不支持ie浏览器')
      return
    }
    this.refreshTable();
  },
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      priceInfo: {},
      total: 0,
      tableLoading: false,
      isVisible: false,
      dialogTitle: "",
      u: null,
      isDetail: false,
      article: {},
      isPause: true,
      speed: [
        {
          key: 1,
          value: '慢速'
        },
        {
          key: 2,
          value: '中速'
        },
        {
          key: 3,
          value: '快速'
        }
      ],
      rate: 1,
      html: '<p>hello</p>',
      toolbarConfig: { },
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'simple', // or 'simple'
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    handleCurrentChange(index) {
      this.currentPage = index
      this.refreshTable()
    },
    refreshTable() {
      getExpense({
        page: this.currentPage,
        pageSize: this.pageSize,
        isDelete: '',
        status: 'true'
      }).then((res) => {
        console.log(res.data)
        this.tableData = res.code === 200 && res.data.data ? res.data.data : [];
        this.total = res.data.total || 0
      });
    },
    broad() {
      this.isPause = false
      if (this.u) {
        speechSynthesis.resume()
        return
      }
      this.u = new SpeechSynthesisUtterance()
      let content = this.article.content.replaceAll('&nbsp;', '')
      console.log(content)
      this.u.text = content
      this.u.lang = 'zh-CN'
      speechSynthesis.speak(this.u)
    },
    pause() {
      this.isPause = true;
      speechSynthesis.pause()
    },
    toDetail(row) {
      this.isDetail = true;
      this.article = row;
      let content = this.article.content.replaceAll('&nbsp;', '')
      this.html = row.content
      this.$nextTick(() => {
        this.$refs.content.innerHTML = content
        $('p').click((ev) => {
          console.log(ev.target.innerHTML)
          let content = ev.target.innerHTML.replaceAll('<br>', '')
          this.rebroad(content)
        })
      })
      
    },
    rebroad(text = '') {
      this.isPause = false
      speechSynthesis.cancel()
      this.u = new SpeechSynthesisUtterance()
      let content = this.article.content.replaceAll('&nbsp;', '')
      this.u.text = text || content
      this.u.lang = this.article.lang === '中文' ? 'zh-CN' : 'en'
      this.u.rate = this.rate;
      speechSynthesis.speak(this.u)
    },
    doBack() {
      this.isPause = true
      this.u = null
      speechSynthesis.cancel()
    },
    doClick(e) {
      console.log(e)
    }
  },
};
</script>

<style lang="less" scoped>
.articles {
  margin-top: 30px;
}
.consultation {
  width: 1200px;
  margin: 20px auto;
}
.flex-center {
  display: flex;
  align-items: center;
  gap: 20px;
}
.art-title {
  font-weight: bold;
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}
.each-article {
  margin-bottom: 10px;
  padding: 12px 20px;
  position: relative;
}
.each-article:hover {
  cursor: pointer;
  box-shadow: 2px 2px 4px #99999990;
}
.content {
  line-height: 24px;
  text-indent: 24px;
  color: #666;
}

.title {
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
}

.detail {
  margin-top: 30px;
}

.el-icon-arrow-left {
  position: absolute;
  top: 10px;
  cursor: pointer;
  font-size: 20px;
  left: 10px;
}
.btns {
  width: 200px;
  display: flex;
  gap: 10px;
  margin: 10px auto;
  justify-content: space-around;
  img {
    width: 26px;
    height: 26px;
  }
}

.subtitle {
  width: 300px;
  display: flex;
  gap: 10px;
  margin: 10px auto;
  justify-content: space-around;
  img {
    width: 26px;
    height: 26px;
  }
}
</style>
